<template>
  <div class="main-container">
    <div class="carbon-cost-box">
      <!-- 搜索 -->
      <el-card>
        <el-row :gutter="20" align="middle">
          <el-col :span="4">
            <el-segmented v-model="dateRange" :options="dateOption" @change="commEvent.onDateRange" />
          </el-col>
          <el-col :span="6">
            <div class="header-search">
              <div class="search__label">时间：</div>
              <div class="search__value">
                <el-date-picker :type="dataTimeType" v-model="dataTime" placeholder="请选择" style="width: 100%" />
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div style="display: flex; justify-content: flex-end; gap: 10px">
              <el-button type="primary" icon="Search" @click="commEvent.getStatData">搜索</el-button>
              <el-button icon="Refresh" @click="commEvent.onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!-- 表格 -->
      <el-card class="mt20">
        <div class="table-main">
          <el-table :data="tableData" border>
            <el-table-column prop="dataTime" label="时间" align="center" />
            <el-table-column prop="totalCost" label="总费用(元)" align="center">
              <template #default="{ row }">
                {{ row.totalCost.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="水" align="center">
              <el-table-column prop="waterValue" label="消耗量" align="center">
                <template #default="{ row }">
                  {{ row.waterValue.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="waterCost" label="费用(元)" align="center">
                <template #default="{ row }">
                  {{ row.waterCost.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="电" align="center">
              <el-table-column prop="electricValue" label="消耗量" align="center">
                <template #default="{ row }">
                  {{ row.electricValue.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="electricCost" label="费用(元)" align="center">
                <template #default="{ row }">
                  {{ row.electricCost.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="天然气" align="center">
              <el-table-column prop="gasValue" label="消耗量" align="center">
                <template #default="{ row }">
                  {{ row.gasValue.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="gasCost" label="费用(元)" align="center">
                <template #default="{ row }">
                  {{ row.gasCost.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- 图表 -->
      <el-row :gutter="20" class="mt20">
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">水费</div>
            <div v-if="waters.length" class="charts">
              <e-charts :option="waterOption1" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">水用量</div>
            <div v-if="waters.length" class="charts">
              <e-charts :option="waterOption2" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">电费</div>
            <div v-if="electrics.length" class="charts">
              <e-charts :option="electricOption1" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">电用量</div>
            <div v-if="electrics.length" class="charts">
              <e-charts :option="electricOption2" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">天然气费</div>
            <div v-if="gases.length" class="charts">
              <e-charts :option="gasOption1" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-card>
            <div class="card__title">天然气用量</div>
            <div v-if="gases.length" class="charts">
              <e-charts :option="gasOption2" />
            </div>
            <div v-else class="charts"><el-empty /></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue"
import ECharts from "@/components/ECharts/index.vue"
import { dateOption, dateValue } from "./enum"
import { option1, option2 } from "./enum"
import dayjs from "dayjs"
import { energyCost } from "@/api/modules/carbon"
import { SystemSpace } from "@/api/interface/carbon"
// 参数
const dateRange = ref<string>("hour") // 日期区间
const dataTime = ref<string>(dayjs().format("YYYY-MM-DD")) // 日期
const tableData = ref<SystemSpace.EnergyCost["totalOutList"][]>([]) // 表格数据
// 日期类型
const dataTimeType = computed<"date" | "month" | "year">(() => {
  const _enum: any = {
    hour: "date",
    day: "month",
    month: "year"
  }
  return _enum[dateRange.value]
})
// 水
const waters = ref<SystemSpace.EnergyCost["waterList"]>([])
const waterOption1 = computed(() => {
  let _series: any = {}
  if (option1?.series && Array.isArray(option1.series)) {
    _series = option1.series[0]
  }
  return {
    ...option1,
    xAxis: { ...option1.xAxis, data: waters.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "元" },
    series: [{ ..._series, data: waters.value.map(item => item.cost) }]
  }
})
const waterOption2 = computed(() => {
  let _series: any = {}
  if (option2?.series && Array.isArray(option2.series)) {
    _series = option2.series[0]
  }
  return {
    ...option2,
    xAxis: { ...option1.xAxis, data: waters.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "m³" },
    series: [{ ..._series, data: waters.value.map(item => item.value) }]
  }
})
// 电
const electrics = ref<SystemSpace.EnergyCost["electricList"]>([])
const electricOption1 = computed(() => {
  let _series: any = {}
  if (option1?.series && Array.isArray(option1.series)) {
    _series = option1.series[0]
  }
  return {
    ...option1,
    xAxis: { ...option1.xAxis, data: electrics.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "元" },
    series: [{ ..._series, data: electrics.value.map(item => item.cost) }]
  }
})
const electricOption2 = computed(() => {
  let _series: any = {}
  if (option2?.series && Array.isArray(option2.series)) {
    _series = option2.series[0]
  }
  return {
    ...option2,
    xAxis: { ...option2.xAxis, data: electrics.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "kWh" },
    series: [{ ..._series, data: electrics.value.map(item => item.value) }]
  }
})
// 天然气
const gases = ref<SystemSpace.EnergyCost["gasList"]>([])
const gasOption1 = computed(() => {
  let _series: any = {}
  if (option1?.series && Array.isArray(option1.series)) {
    _series = option1.series[0]
  }
  return {
    ...option1,
    xAxis: { ...option1.xAxis, data: gases.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "元" },
    series: [{ ..._series, data: gases.value.map(item => item.cost) }]
  }
})
const gasOption2 = computed(() => {
  let _series: any = {}
  if (option2?.series && Array.isArray(option2.series)) {
    _series = option2.series[0]
  }
  return {
    ...option2,
    xAxis: { ...option2.xAxis, data: gases.value.map(item => item.dataTime) },
    yAxis: { ...option1.yAxis, name: "m³" },
    series: [{ ..._series, data: gases.value.map(item => item.value) }]
  }
})

// 事件
const commEvent = {
  // 修改日期区间
  onDateRange: (value: string) => {
    const _date: any = {
      hour: dayjs().format("YYYY-MM-DD"),
      day: dayjs().format("YYYY-MM"),
      month: dayjs().format("YYYY")
    }
    dataTime.value = _date[value]
  },
  // 重置功能
  onReset: () => {
    // 重置日期范围
    dateRange.value = "hour"

    // 重置时间为当前日期
    dataTime.value = dayjs().format("YYYY-MM-DD")

    // 清空所有数据
    tableData.value = []
    waters.value = []
    electrics.value = []
    gases.value = []

    // 重新获取初始数据
    commEvent.getStatData()
  },
  // 获取统计数据
  getStatData: async () => {
    const _date: any = {
      hour: { time: dayjs(dataTime.value).format("YYYYMMDD"), suffix: "时" },
      day: { time: dayjs(dataTime.value).format("YYYYMM"), suffix: "日" },
      month: { time: dayjs(dataTime.value).format("YYYY"), suffix: "月" }
    }
    const _dataTime: string = _date[dateRange.value].time
    const _suffix: string = _date[dateRange.value].suffix
    const _timeType: number = dateValue[dateRange.value].timeType
    const params: SystemSpace.EnergyCostQuery = { timeType: _timeType, dataTime: _dataTime }
    const { data } = await energyCost(params)
    waters.value = (data.waterList || []).map(item => ({
      cost: item.cost || 0,
      value: item.value || 0,
      dataTime: item.dataTime.substring(item.dataTime.length - 2) + _suffix
    }))
    electrics.value = (data.electricList || []).map(item => ({
      cost: item.cost || 0,
      value: item.value || 0,
      dataTime: item.dataTime.substring(item.dataTime.length - 2) + _suffix
    }))
    gases.value = (data.gasList || []).map(item => ({
      cost: item.cost || 0,
      value: item.value || 0,
      dataTime: item.dataTime.substring(item.dataTime.length - 2) + _suffix
    }))
    const { dataTime: _tableTime } = data.totalOutList
    const _format: any = {
      hour: dayjs(_tableTime).format("YYYY-MM-DD"),
      day: dayjs(_tableTime).format("YYYY-MM"),
      month: dayjs(_tableTime).format("YYYY")
    }
    tableData.value = [{ ...data.totalOutList, dataTime: _format[dateRange.value] }]
  }
}
onMounted(() => {
  commEvent.getStatData()
})
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.carbon-cost-box {
  width: 100%;

  .mt20 {
    margin-top: 20px;
  }

  .mb20 {
    margin-bottom: 20px;
  }

  .header-search {
    display: flex;
    align-items: center;
    width: 100%;
    .search__label {
      flex-shrink: 0;
      font-size: 13px;
    }
    .search__value {
      flex: 1;
    }
  }
  .card__title {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    font-size: 16px;
    font-weight: bold;
    &::before {
      position: absolute;
      left: 0;
      width: 3px;
      height: 75%;
      content: "";
      background-color: #1d4a9d;
      border-radius: 16px;
    }
  }
  .charts {
    width: 100%;
    height: 400px;
  }
}
</style>
